<template>
  <div>
    <div id="div_details_lxy">
      <!-- 头部 -->
      <div class="div_detail_lxy">
        <p><van-icon name="arrow-left" @click="fanhui" /></p>
        <p>课程详情</p>
        <p><van-icon name="share-o" /></p>
      </div>
      <!-- 中间 -->
      <div class="div_2_lxy">
        <div class="div_1_lxy">
          <p>{{ detailsList.title }}</p>
          <p><van-icon name="star-o" /></p>
        </div>
        <p class="p3_lxy">免费</p>
        <p>
          共{{ detailsList.course_type }}课时 |
          {{ detailsList.sales_num }}人已报名
        </p>
        <p>
          开课时间：{{ detailsList.start_play_date | filterstart }} -
          {{ detailsList.end_play_date | filterend }}
        </p>
      </div>
      <!-- 图文 -->
      <div class="div_3_lxy">
        <p>{{ detailsList.classify_title }}</p>
        <div  class="div_4_lxy">
          <img :src="imglist.avatar" />
          <p>{{ imglist.teacher_name }}</p>
        </div>
      </div>
      <!-- 课程介绍 -->
      <div class="div_5_lxy">
        <p>课程介绍</p>
      </div>
      <!-- 课程大纲 -->
      <div class="div_6_lxy">
        <p>课程大纲</p>
        <ol>
          <li class="ol_li_lxy">
            <div>
              <span></span>
              <span>回放</span>
              <span>第一讲第一课时</span>
            </div>
            <div>
              <span class="span123">{{classlists}}</span>
              <span></span>
            </div>
          </li>
        </ol>
      </div>
      <!-- 课程评论 -->
      <div class="div_9_lxy">
        <p>课程评论</p>
      </div>
    </div>
    <!-- 底部 -->
    <div id="div_bottoms_lxy">
      <button>立即报名</button>
    </div>
  </div>
</template>

<script>
import { detailsID, AClass,Comment } from "../request/http"; //详情页接口和大纲
import { Icon } from "vant";

export default {
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {
      detailsList: [],
      imglist: [],
      sid: "",
      classlist: [],
      classlists:"",
      classlistss:"",
    };
  },
  created() {
    this.getDeatils(); //调用接口
    this.getClass(); //大纲接口
    this.getComment();//评论接口
  },
  //时间过滤器
  filters: {
    //开始的时间
    filterstart(val) {
      var date = new Date(val * 1000);
      var year = date.getFullYear(); //年
      var month = date.getMonth() + 1; //月
      var datee = date.getDate(); //星期
      var time = year + "." + month + "." + datee + "";
      function getTimerr() {
        var time = new Date();
        var hour = time.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + " " + getTimerr();
    },
    //结束的时间
    filterend(vals) {
      var date = new Date(vals * 1000);
      var year = date.getFullYear(); //年
      var month = date.getMonth() + 1; //月
      var datee = date.getDate() + 3; //星期
      var time = year + "." + month + "." + datee + "";
      function getTimerr() {
        var time = new Date();
        var hour = time.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + " " + getTimerr();
    },
  },
  methods: {
    //返回上一级
    fanhui() {
      window.history.back();
    },
    //获取详情页接口
    getDeatils() {
      this.sid = this.$route.query.id;
      // console.log(this.sid);
      detailsID(this.sid).then((res) => {
        // console.log(res);
        this.detailsList = res.info;
        this.imglist = res.teachers[0]||'';
      });
    },

    // 大纲的接口
    getClass() {
      this.sid = this.$route.query.id;
      AClass(this.sid).then((res) => {
        // console.log(res); 
        this.classlist = res;
        this.classlists = res[0].teachers[0].teacher_name||'';
        this.classlistss = res.start_play;

        // console.log(this.classlistss); 
        // console.log(this.classlist[0].teachers[0].id);
        // console.log(this.classlist);
      });
    },

    //评论的接口
    getComment(){
      this.sid = this.$route.query.id;
      Comment(this.sid).then((res)=>{
        console.log(res);
      })
    }


  },
};
</script>



<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#div_details_lxy {
  width: 100%;
  height: 93vh;
  overflow: scroll;
}
#div_bottoms_lxy {
  width: 100%;
  height: 7vh;
  button {
    width: 100%;
    height: 100%;
    background: rgba(231, 77, 21, 0.87);
    border: 0px;
    color: white;
    font-size: 18px;
  }
}
.div_detail_lxy {
  width: 100%;
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgrey;
}

.div_1_lxy {
  width: 100%;
  display: flex;
  justify-content: space-between;
  p {
    &:nth-child(1) {
      font-size: 20px;
      margin-left: 20px;
      margin-top: 15px;
    }
    &:nth-child(2) {
      font-size: 20px;
      margin-right: 10px;
      margin-top: 15px;
    }
  }
}
.div_2_lxy {
  width: 100%;
  height: 150px;
  background: white;
  p {
    margin-left: 20px;
    &:nth-child(3) {
      font-size: 16px;
      margin-top: 5px;
      color: rgb(155, 152, 152);
    }
    &:nth-child(4) {
      font-size: 16px;
      margin-top: 5px;
      color: rgb(160, 156, 156);
    }
  }
  .p3_lxy {
    font-size: 20px;
    color: rgba(245, 91, 35, 0.884);
    margin-top: 5px;
  }
}
.div_3_lxy {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  background: white;
  p {
    &:nth-child(1) {
      font-size: 20px;
      margin-left: 10px;
      padding-top: 10px;
    }
  }
  .div_4_lxy {
    margin-left: 20px;
    padding-top: 15px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 20px;
    }
    p {
      font-size: 15px;
      margin-left: 15px;
    }
  }
}
.div_5_lxy {
  width: 100%;
  height: 70px;
  margin-top: 20px;
  background: white;
  p {
    font-size: 16px;
    margin-left: 10px;
    padding-top: 20px;
  }
}
.div_6_lxy {
  width: 100%;
  background: white;
  margin-top: 20px;
  p {
    font-size: 17px;
    margin-left: 10px;
    padding-top: 15px;
  }
}
.ol_li_lxy {
  margin-top: 10px;
  div {
    &:nth-child(1) {
      span {
        display: inline-block;
        &:nth-child(1) {
          width: 5px;
          height: 5px;
          background: orange;
          border-radius: 50%;
          margin-left: 20px;
        }
        &:nth-child(2) {
          font-size: 15px;
          width: 40px;
          height: 20px;
          text-align: center;
          background: orange;
          color: white;
          margin-left: 10px;
        }
        &:nth-child(3) {
          font-size: 14px;
          margin-left: 10px;
        }
      }
    }
  }
}
.span123{
  display: inline-block;
  font-size: 15px;
  margin-left: 50px;
  color: lightgrey;
}
.div_9_lxy{
  width: 100%;
  height: 100px;
  background: white;
  margin-top: 20px;
  p{
    font-size: 18px;
    margin-left: 10px;
    padding-top: 10px;
  }
}
</style>